1import {useState, useReducer, PropsWithChildren} from 'react';
  2import Box from '@mui/material/Box';
  3import {useTranslation} from 'react-i18next';
  4import {getSession, useSession} from 'next-auth/react';
  5import TravelColumns from '../../../containers/TravelColumns';
  6import NewTravelDialog from '../../../containers/NewTravelDialog';
  7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
  8import Fab from '../../../containers/Fab';
  9import pageUtils from '../../../lib/pageUtils';
 10import EventLayout, {TabComponent} from '../../../layouts/Event';
 11import {
 12  EventByUuidDocument,
 13  FindUserVehiclesDocument,
 14  useFindUserVehiclesQuery,
 15} from '../../../generated/graphql';
 16
 17interface Props {
 18  eventUUID: string;
 19  announcement?: string;
 20}
 21
 22const Page = (props: PropsWithChildren<Props>) => {
 23  return <EventLayout {...props} Tab={TravelsTab} />;
 24};
 25
 26const TravelsTab: TabComponent = () => {
 27  const {t} = useTranslation();
 28  const session = useSession();
 29  const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
 30  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
 31
 32  const isAuthenticated = session.status === 'authenticated';
 33  const {data} = useFindUserVehiclesQuery({
 34    skip: !isAuthenticated,
 35  });
 36  const vehicles = data?.me?.profile?.vehicles?.data || [];
 37
 38  const addTravelClickHandler =
 39    isAuthenticated && vehicles?.length != 0
 40      ? toggleVehicleChoice
 41      : () => toggleNewTravel({opened: true});
 42
 43  return (
 44    <Box>
 45      <TravelColumns toggle={addTravelClickHandler} />
 46      <Fab
 47        onClick={addTravelClickHandler}
 48        aria-label="add-car"
 49      >
 50        {t('travel.creation.title')}
 51      </Fab>
 52      <NewTravelDialog
 53        key={openNewTravelContext.vehicle?.id || 'noVehicle'}
 54        context={openNewTravelContext}
 55        toggle={() => toggleNewTravel({opened: false})}
 56      />
 57      <VehicleChoiceDialog
 58        open={openVehicleChoice}
 59        toggle={toggleVehicleChoice}
 60        toggleNewTravel={toggleNewTravel}
 61        vehicles={vehicles}
 62      />
 63    </Box>
 64  );
 65};
 66
 67export const getServerSideProps = pageUtils.getServerSideProps(
 68  async (context, apolloClient) => {
 69    const {uuid} = context.query;
 70    const {host = ''} = context.req.headers;
 71    const session = await getSession(context);
 72    let event = null;
 73
 74    // Fetch event
 75    try {
 76      const {data} = await apolloClient.query({
 77        query: EventByUuidDocument,
 78        variables: {uuid},
 79      });
 80      event = data?.eventByUUID?.data;
 81    } catch (error) {
 82      return {
 83        notFound: true,
 84      };
 85    }
 86
 87    // Fetch user vehicles
 88    if (session)
 89      await apolloClient.query({
 90        query: FindUserVehiclesDocument,
 91      });
 92
 93    return {
 94      props: {
 95        eventUUID: uuid,
 96        metas: {
 97          title: event?.attributes?.name || '',
 98          url: `https://${host}${context.resolvedUrl}`,
 99        },
100      },
101    };
102  }
103);
104
105export default Page;